<script lang="ts" setup>
import moment from 'moment'
import { Icon } from 'vant'
import { JobAction, JobRecordModel } from '~/model/JobRecordModel';
import { SalaryModel } from '~/model/SalaryModel';
import lodash from 'lodash'

const router = useRouter()

const props = defineProps<{
  jobRecords:  JobRecordModel[],
}>()

const listWithoutSettlement = computed(() => {
  if (props.jobRecords[props.jobRecords.length-1].action === JobAction.Settlement) {
    return props.jobRecords.slice(0, props.jobRecords.length-1)
  }
  else {
    return lodash.cloneDeep(props.jobRecords)
  }
})
const salaryModel = computed(() => new SalaryModel(listWithoutSettlement.value))
const jrs = computed(() => {
  return props.jobRecords.toReversed()
})

function goDetail(row: JobRecordModel) {
  router.push(`/jobs/events/detail?id=${row.id}`)
}

function dateFormatter(r: JobRecordModel) {
  return moment(r.date).format('YYYY/MM/DD')
}

function contentFormatter(r: JobRecordModel) {
  return r.description()
}

const start = computed(() => {
  if (!jrs.value.length) {
    return
  }
  return moment(jrs.value[jrs.value.length-1].date).format('YYYY/MM/DD')
})
const end = computed(() => {
  if (!jrs.value.length) {
    return
  }
  if (jrs.value[0].action === JobAction.Settlement) {
    return moment(jrs.value[0].date).format('YYYY/MM/DD')
  }
  else {
    return '至今'
  }
})

const showDetail = ref(false)

const newGroup = computed(() => {
  return end.value === '至今'
})
watch(newGroup, () => {
  if (newGroup.value) {
    showDetail.value = true
  }
})
</script>

<template>
  <div paper p0 mx-2 mb-2>
    <div flex items-center lh-2rem p2>
      <div>{{ start }} - {{ end }}</div>
      <Icon :name="showDetail ? 'arrow-down' : 'arrow-up'"
        ml-auto
        @click="showDetail = !showDetail"
        v-if="!newGroup"></Icon>
    </div>

    <div v-show="showDetail">
      <div flex text-center v-if="jrs.length && !newGroup">
        <div paper bg-gray-2 flex-1 mx2>
          <div text-gray-5 text-size-3.5>工作天数</div>
          <div text-size-5 mt2>{{ salaryModel.totalWorkDays().toString() }}</div>
        </div>
        <div paper bg-gray-2 flex-1 mr2>
          <div text-gray-5 text-size-3.5>薪资总计</div>
          <div text-size-5 mt2>{{ salaryModel.totalShouldSent().toString() }}</div>
        </div>
        <div paper bg-gray-2 flex-1 mr2>
          <div text-gray-5 text-size-3.5>已发</div>
          <div text-size-5 mt2>{{ salaryModel.totalAdvance().toString() }}</div>
        </div>
        <div paper bg-gray-2 flex-1 mr2>
          <div text-gray-5 text-size-3.5>未发</div>
          <div text-size-5 mt2>{{ salaryModel.totalShouldSentRemaining().toString() }}</div>
        </div>
      </div>

      <table class="lx-table" b-t="1px solid gray-2">
        <thead>
          <tr>
            <th>日期</th>
            <th>事务</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in jrs" :key="record.id" @click="goDetail(record)">
            <td>{{ dateFormatter(record) }}</td>
            <td>{{ contentFormatter(record) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>

</style>
